<div class="col-md-3 side-bar" style="width:20%;">
    <div class="card">

        <div style="padding-top:1em;pdding-bottom:1em;display: block;text-align: center;">
            @if (isset($currentUser) && $currentUser->transSubscribe())
                <a data-method="post" class="btn btn-default no-pjax action-btn" href="javascript:void(0);" data-url="{{ route('user-translate.unsubscribe') }}">
                    <i class="fa fa-minus"></i> 取消订阅
                </a>
            @else
                    <a data-method="post" class="btn btn-warning no-pjax action-btn" href="javascript:void(0);" data-url="{{ route('user-translate.subscribe') }}">
                        <i class="fa fa-bell" aria-hidden="true"></i> 订阅翻译文章
                    </a>

            @endif

            {{--<a data-method="post" class="btn btn-warning no-pjax action-btn" href="javascript::void(0);" data-url=""--}}
               {{--href="{{ isset($category) ? URL::route('topics.create', ['category_id' => $category->id]) : URL::route('topics.create') }}"--}}
               {{--style="cursor:pointer;">--}}
                {{--<i class="fa fa-bell" aria-hidden="true"></i> 订阅翻译文章--}}
            {{--</a>--}}
        </div>
        <div style="margin: 16px 15px 1px;line-height: 22px;text-align: center;">
            翻译文章发布时，您将第一时间收到通知。
        </div>
    </div>
    <div class="card">
        <div class="title text-center">文章译者</div>
        <div class="content content-pad">
            @foreach($topic->translators() AS $user)
                <a href="{{ route('users.show', $user->id) }}"><img src="{{$user->present()->gravatar}}" width="33px" height="33px" /></a>
            @endforeach
        </div>
    </div>
    <div class="card" style="display: none;">
        <div style="padding-top:1em;pdding-bottom:1em;display: block;text-align: center;" >
            <a class="btn btn-warning card-btn">
                <i class="fa fa-send" aria-hidden="true"></i>  纠错改进
            </a>
        </div>
        <div class="content-pad">
            <div class="second-title">
                <span>贡献者</span>
            </div>
            <div class="content popover-with-html" data-placement="auto left"  id="up-vote"  data-content="参与改进文本的用户">
                <a><img src="https://iocaffcdn.phphub.org/uploads/avatars/32812_1543588344.png!/both/100x100" width="33px" height="33px" /></a>
                <a><img src="https://iocaffcdn.phphub.org/uploads/avatars/32812_1543588344.png!/both/100x100" width="33px" height="33px" /></a>
                <a><img src="https://iocaffcdn.phphub.org/uploads/avatars/32812_1543588344.png!/both/100x100" width="33px" height="33px" /></a>
                <a><img src="https://iocaffcdn.phphub.org/uploads/avatars/32812_1543588344.png!/both/100x100" width="33px" height="33px" /></a>
                <a><img src="https://iocaffcdn.phphub.org/uploads/avatars/32812_1543588344.png!/both/100x100" width="33px" height="33px" /></a>
                <a><img src="https://iocaffcdn.phphub.org/uploads/avatars/32812_1543588344.png!/both/100x100" width="33px" height="33px" /></a>
                <a><img src="https://iocaffcdn.phphub.org/uploads/avatars/32812_1543588344.png!/both/100x100" width="33px" height="33px" /></a>
            </div>

        </div>
    </div>
    <div class="card" id="toc-card">
        <div id="toc" style="background-color: #fff;" >
        </div>
    </div>

</div>

<div class="clearfix"></div>
@section('scripts')
    <style>
        .nav-list li.active{background:#EEEEEE}
    </style>
    <script>
        $(document).ready(function () {
            let width = $("#toc-card").outerWidth();
            $("#toc-card").css('width', width);
            $(window).resize(function(){
                $("#toc-card").css('width', 'auto');
                let width = $(".card").outerWidth();
                $("#toc-card").css('width', width);
            });

            var toc = $("#toc").tocify({
                context:$('.content-body'),
                selectors: "h2,h3,h4",
                showAndHide:true,
                showEffect:"fadeIn",
                extendPage:false,
                highlightDefault:true
            }).data("toc-tocify");

            prettyPrint();
            $(".optionName").popover({
                trigger: "hover"
            });

            let topX = $(".card").offset().top;

            $(window).scroll(function()
            {
                if($(window).scrollTop() >= topX)
                {
                    $("#toc-card").addClass('flex');
                }
                else
                {
                    $("#toc-card").removeClass('flex');
                }
            });

        });
    </script>
@stop

